<template>
  <div class="settings-container">
    <el-card>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="角色管理" name="first">
          <!-- 角色管理组件 -->
          <roleManager />
        </el-tab-pane>
        <el-tab-pane label="公司信息" name="second">
          <el-alert
            title="对公司名称、公司地址、营业执照、公司地区的更新，将使得公司资料被重新审核，请谨慎修改"
            type="info"
            show-icon
          />
          <el-form
            :label-position="labelPosition"
            label-width="80px"
            :model="formLabelAlign"
            disabled
          >
            <el-form-item label="公司名称">
              <el-input v-model="formLabelAlign.name" />
            </el-form-item>
            <el-form-item label="公司地址">
              <el-input v-model="formLabelAlign.region" />
            </el-form-item>
            <el-form-item label="公司邮箱">
              <el-input v-model="formLabelAlign.type" />
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="formLabelAlign.type" type="textarea" />
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import roleManager from './components/role-manager'
export default {
  name: '',
  components: {
    roleManager
  },
  data() {
    return {
      activeName: 'first',
      labelPosition: 'right',
      formLabelAlign: {
        name: '',
        region: '',
        type: ''
      }
    }
  },
  computed: {},
  created() {},
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>
<style lang="scss" scoped>
.settings-container {
  padding: 30px 50px;
  .el-form {
    width: 40%;
    margin: 20px;
  }
}
</style>
